<template>
  <div class="">
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" style="font-size: 12px; margin-botton: 20px">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card style="margin-top: 10px">
      <el-alert
        title="注意:只允许为第三级分类设置相关参数"
        type="warning"
        show-icon
      >
      </el-alert>
      <el-row :gutter="10">
        <el-col :span="2" style="margin-top: 10px; font-weight: 700">
          选择商品分类
        </el-col>
        <el-col :span="8" style="margin-top: 10px">
          <el-cascader
            style="width: 300px"
            v-model="checkedArr"
            :options="goodsCateData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-col>
      </el-row>
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-top: 10px"
      >
        <!-- 1111111111111111111动态参数11111111111111111111111 -->
        <el-tab-pane label="动态参数" name="many">
          <el-row :gutter="10">
            <el-col :span="2">
              <el-button
                type="primary"
                size="small"
                :disabled="isOk"
                @click="addManyDia"
                >添加参数</el-button
              ></el-col
            >
          </el-row>
          <!-- 表格 -->
          <el-table border :data="manyParamsArr">
            <el-table-column width="80px" type="expand">
              <template slot-scope="scope">
                <div>
                  <template v-if="scope.row.attr_vals.length > 0">
                    <div>
                      <el-tag
                        type=""
                        style="margin: 5px"
                        v-for="(item, index) in scope.row.attr_vals"
                        :key="index"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(scope.row, item)"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </template>
                  <el-input
                    style="width: 100px"
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    icon="el-icon-edit"
                    type="primary"
                    size="mini"
                    plain
                    @click="editManyDia(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    size="mini"
                    plain
                    @click="del(scope.row.attr_id)"
                  >
                    删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 动态参数添加弹框 -->
          <el-dialog
            title="添加动态参数"
            @close="reset"
            :visible.sync="ManyDia"
            width="50%"
          >
            <el-form :model="addManyForm">
              <el-form-item label="活动名称">
                <el-input
                  style="width: 300px"
                  v-model="addManyForm.attr_name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="ManyDia = false">取 消</el-button>
              <el-button type="primary" @click="addManyDiaOk">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 动态参数编辑弹框 -->
          <el-dialog
            title="编辑动态参数"
            @close="reset"
            :visible.sync="editDia"
            width="50%"
          >
            <el-form :model="addManyForm">
              <el-form-item label="活动名称">
                <el-input
                  style="width: 300px"
                  v-model="addManyForm.attr_name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editDia = false">取 消</el-button>
              <el-button type="primary" @click="editManyDiaOk">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
        <!-- 1111111111111111111静态属性11111111111111111111111111 -->

        <el-tab-pane label="静态属性" name="only">
          <el-row :gutter="10">
            <el-col :span="2">
              <el-button
                type="primary"
                size="small"
                :disabled="isOk"
                @click="addManyDia"
                >添加属性</el-button
              ></el-col
            >
          </el-row>
          <!-- 表格 -->
          <el-table border :data="onlyParammsArr">
            <el-table-column width="80px" type="expand">
              <template slot-scope="scope">
                <div>
                  <template v-if="scope.row.attr_vals.length > 0">
                    <div>
                      <el-tag
                        type=""
                        style="margin: 5px"
                        v-for="(item, index) in scope.row.attr_vals"
                        :key="index"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(scope.row, item)"
                      >
                        {{ item }}
                      </el-tag>
                    </div>
                  </template>
                  <el-input
                    style="width: 100px"
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  >
                  </el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                    >+ New Tag</el-button
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div>
                  <el-button
                    icon="el-icon-edit"
                    type="primary"
                    size="mini"
                    plain
                    @click="editOnlyDia(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    icon="el-icon-delete"
                    type="danger"
                    size="mini"
                    plain
                    @click="del(scope.row.attr_id)"
                  >
                    删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!--静态属性添加弹框 -->
          <el-dialog
            title="添加静态属性"
            @close="reset"
            :visible.sync="ManyDia"
            width="50%"
          >
            <el-form :model="addManyForm">
              <el-form-item label="活动名称">
                <el-input
                  style="width: 300px"
                  v-model="addManyForm.attr_name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="ManyDia = false">取 消</el-button>
              <el-button type="primary" @click="addManyDiaOk">确 定</el-button>
            </div>
          </el-dialog>
          <!-- 静态属性编辑弹框 -->
          <el-dialog
            title="编辑静态属性"
            @close="reset"
            :visible.sync="editDia"
            width="50%"
          >
            <el-form :model="addManyForm">
              <el-form-item label="活动名称">
                <el-input
                  style="width: 300px"
                  v-model="addManyForm.attr_name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="editDia = false">取 消</el-button>
              <el-button type="primary" @click="editOnlyDiaOk">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 默认显示的
      activeName: "many",
      ManyDia: false,
      editDia: false,
      addManyForm: {
        id: 0,
        attr_name: "",
        attr_sel: "",
      },
      //三级分类配顶制
      defaultProps: {
        expandTrigger: "hover",
        children: "children",
        label: "cat_name",
        value: "cat_id",
      },
      checkedArr: [], //放选中分类id组成的数组
      goodsCateData: [],
      //   动态参数数组
      manyParamsArr: [],
      // 静态属性数组
      onlyParammsArr: [],
      inputVisible: false,
      inputValue: "",
      addManyParamsData: {
        attr_name: "",
      },
    };
  },
  created() {
    this.getGoodsCateList();
  },
  methods: {
    // 静态编辑弹框  确定
    async editOnlyDiaOk() {
      let id = this.curremt_cate_id;
      await this.$API.editGoodsParamsApi(id, this.addManyForm.attr_id, {
        attr_name: this.addManyForm.attr_name,
        attr_sel: this.activeName,
        attr_vals: this.addManyForm.attr_vals,
      });
      this.getGoodsParamsList();
      this.editOnlyDia = false;
    },
    // 静态编辑弹框
    editOnlyDia(row) {
      this.addManyForm.attr_name = row.attr_name;
      this.addManyForm.attr_id = row.attr_id;
      this.addManyForm.attr_vals = row.attr_vals.join(",");
      this.editDia = true;
    },
    //   添加动态参数弹框
    async addManyDia() {
      this.ManyDia = true;
      // this.addManyForm.id = this.goods_cat[this.checkedArr.length - 1];
      // this.addManyForm.attr_sel = this.activeName;
    },
    // 添加动态参数  确定
    async addManyDiaOk() {
      let id = this.curremt_cate_id;
      await this.$API.addGoodsParamsApi(id, {
        attr_name: this.addManyForm.attr_name,
        attr_sel: this.activeName,
      });
      this.getGoodsParamsList();
      // this.getGoodsCateList();
      this.ManyDia = false;
    },
    // 编辑动态参数弹框
    editManyDia(row) {
      this.addManyForm.attr_name = row.attr_name;
      this.addManyForm.attr_id = row.attr_id;
      this.addManyForm.attr_vals = row.attr_vals.join(",");

      this.editDia = true;
    },
    // 编辑动态参数  确定
    async editManyDiaOk() {
      let id = this.curremt_cate_id;

      await this.$API.editGoodsParamsApi(id, this.addManyForm.attr_id, {
        attr_name: this.addManyForm.attr_name,
        attr_sel: this.activeName,
        attr_vals: this.addManyForm.attr_vals,
      });
      this.getGoodsParamsList();
      this.editDia = false;
    },
    // 删除商品
    async del(arrtId) {
      await this.$API.delGoodsParamsApi(this.curremt_cate_id, arrtId);
      this.getGoodsParamsList();
    },
    // 清空输入框的内容
    reset() {
      this.addManyForm.attr_name = "";
    },
    //   商品分类
    async getGoodsCateList() {
      const res = await this.$API.getGoodsCateListApi();
      console.log("商品分类", res);
      this.goodsCateData = res;
    },
    // 获取商品参数列表
    async getGoodsParamsList() {
      if (this.checkedArr.length !== 3) {
        // 错误提示
        this.$message({
          type: "error",
          message: "必须要选择三级的",
        });

        this.manyParamsArr = [];
        this.onlyParammsArr = [];
        // 直接返回
        return false;
      }
      // 调取获取参数的接口
      const res = await this.$API.getGoodsParamsApi(
        this.curremt_cate_id,
        this.activeName
      );
      //   console.log(`当前${activeName}下的分类参数`, res);
      // 区分动态和静态的数据渲染
      if (this.activeName === "many") {
        res.forEach((item) => {
          item.inputVisible = false;
          item.inputValue = "";
          item.attr_vals =
            item.attr_vals.length > 0 ? item.attr_vals.split(",") : [];
        });
        //   渲染动态参数
        console.log("切割，", res);
        this.manyParamsArr = res;
      } else if (this.activeName === "only") {
        // 渲染静态属性
        this.onlyParammsArr = res;
      }
    },
    //点击tab
    handleClick() {
      this.getGoodsCateList();
    },
    // 三级分类选中的时候
    handleChange() {
      this.getGoodsCateList();
      this.getGoodsParamsList();
    },
    // 删除标签
    async handleClose(row, item) {
      row.attr_vals.splice(row.attr_vals.indexOf(item), 1);
      let id = this.curremt_cate_id;
      await this.$API.editGoodsParamsApi(id, row.attr_id, {
        attr_name: row.attr_name,
        attr_sel: this.activeName,
        attr_vals: row.attr_vals.join(","),
      });
    },

    showInput(row) {
      row.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    async handleInputConfirm(row) {
      if (row.inputValue.trim().length > 0) {
        row.attr_vals.push(row.inputValue);
        console.log(row);
        let id = this.curremt_cate_id;
        await this.$API.editGoodsParamsApi(id, row.attr_id, {
          attr_name: row.attr_name,
          attr_sel: this.activeName,
          attr_vals: row.attr_vals.join(","),
        });
      }
      row.inputVisible = false;
      row.inputValue = "";
    },
  },
  computed: {
    curremt_cate_id() {
      return this.checkedArr[this.checkedArr.length - 1];
    },
    isOk() {
      return this.checkedArr.length !== 3;
    },
  },
  components: {},
};
</script>

<style lang='scss'>
.el-input {
  display: block;
}
</style>
